@extends('admin.admin')

@section('content')
        <!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        商品管理
        <small>分类列表</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="/admin"><i class="fa fa-dashboard"></i> 控制面板</a></li>
        <li ><a href="/admin/category">商品管理</a></li>
        <li class="active">分类列表</li>
    </ol>
</section>

<!-- Main content -->
<section class="content">

    <div class="row">
        <div class="col-xs-12">
            <div class="box box-primary">
                <div class="box-header">
                    <h3 class="box-title">分类列表</h3>
                    <div class="pull-right">
                        <a href="{{route('admin.category.create')}}" type="button" class="btn btn-block btn-success btn-xs"><i class="icon  glyphicon glyphicon-plus"></i> 添加</a>
                    </div>
                </div>
                <!-- /.box-header -->

                {!! Form::model($categoryInfo,array('route' => 'admin.category.sort','class'=>'form-horizontal')) !!}
                <div class="box-body table-responsive no-padding">
                    <table id="tableTree" class="table table-hover">
                        <tr>
                            <th style="width:50px;min-width:50px;">排序</th>
                            <th style="width:60px;min-width:60px;">分类id</th>
                            <th style="width:250px;min-width:250px;;">分类名称</th>
                            <th style="min-width: 100px;">分类关键词</th>
                            <th style="min-width: 100px;">分类描述</th>
                            <th style="width: 80px;min-width: 80px;">计量单位</th>
                            <th>是否显示</th>
                            <th style="width: 300px;">操作</th>
                        </tr>
                        @foreach ($categoryInfo as $category)
                            <tr class="{{'js-level'.$category->deepth}} <?php if($category->deepth){ echo "hide";}?>" data-id="{{$category->cat_id}}" data-parent="{{$category->parent_id}}">
                                <td>{!! Form::text('list_order['.$category->cat_id.']',intval($category->sort_order),['style'=>'width:40px; text-align:center']) !!}</td>
                                <td>
                                        {{$category->cat_id}}
                                </td>
                                <td>
                                    @if($category->hasChildren())
                                        <a class="js-toggle off" href="javascript:;">
                                            <span class="js-open fancytree-node" title="展开" style="padding-left: {{($category->deepth)*16}}px;">
                                                <span class="fancytree-expander glyphicon glyphicon-plus-sign"></span>
                                                <span class="fancytree-icon glyphicon glyphicon-folder-close"></span>
                                            </span>
                                            <span class="js-close fancytree-node hide" title="收起" style="padding-left: {{($category->deepth)*16}}px;">
                                                <span class="fancytree-expander glyphicon glyphicon-minus-sign"></span>
                                                <span class="fancytree-icon glyphicon glyphicon-folder-open"></span>
                                            </span>
                                        </a>
                                    @else
                                    <span class="fancytree-node" style="padding-left: {{($category->deepth)*16}}px;">
                                        <span class="fancytree-expander glyphicon glyphicon-minus-sign"></span>
                                        <span class="fancytree-icon glyphicon glyphicon-folder-open"></span>
                                    </span>
                                    @endif
                                    <span class="fancytree-title" style="margin-left:4px;">{{$category->cat_name}}</span>
                                </td>
                                @if($category->hasChildren())
                                    <td colspan="3">&nbsp;</td>
                                @else
                                    <td>{{$category->keywords}}</td>
                                    <td>{{$category->cat_desc}}</td>
                                    <td>{{$category->measure_unit}}</td>
                                @endif

                                <td width="9%" style="text-align: center" class="is_recommend" id="{{$category->cat_id}}" is_recommend="{{$category->is_recommend}}">@if($category->is_recommend==1)
                                        <i  class="recommend glyphicon glyphicon-ok" style=" cursor: pointer;color: green;"></i>
                                    @else
                                        <i  class="recommend glyphicon glyphicon-remove" style=" cursor: pointer;color: red;"></i>
                                    @endif
                                </td>

                                <td>
                                    <a href="{{Route('admin.category.categoryAttribute',$category->cat_id)}}" type="button" class="btn  btn-default btn-xs @if($category->hasChildren())disabled @endif"><i class="icon  glyphicon glyphicon-edit"></i> 分类属性</a>
                                    <a href="{{Route('admin.categoryBrand.categoryBrands',$category->cat_id)}}" type="button" class="btn  btn-default btn-xs @if($category->hasChildren())disabled @endif"><i class="icon  glyphicon glyphicon-edit"></i> 品牌管理</a>
                                    <a href="{{Route('admin.category.edit',$category->cat_id)}}" type="button" class="btn  btn-default btn-xs @if($category->hasChildren())disabled @endif"><i class="icon  glyphicon glyphicon-edit"></i> 修改</a>
                                    <button type="button" class="btn  btn-danger btn-xs @if($category->hasChildren())disabled @endif" data-hide="leenHide" data-toggle="modal" data-target="#modal{{$category->cat_id}}"><i class="icon  glyphicon glyphicon-remove"></i> 删除</button>
                                    <div id="modal{{$category->cat_id}}" class="modal fade">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                                    <h4 class="modal-title">删除警告:</h4>
                                                </div>
                                                <div class="modal-body">
                                                    <p>确认要删除分类[{{$category->cat_name}}]吗?</p>
                                                </div>
                                                <div class="modal-footer">
                                                    
                                                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                                    <button type="button" onclick="delOrder('{{route("admin.category.destroy", $category->cat_id)}}','{{$category->cat_id}}')" class="btn btn-danger">删除</button>
                                                    
                                                </div>
                                            </div><!-- /.modal-content -->
                                        </div><!-- /.modal-dialog -->
                                    </div><!-- /.modal -->
                                </td>
                            </tr>
                        @endforeach
                    </table>
                </div>
                <!-- /.box-body -->
                <div class="box-footer">
                    <button type="submit" class="btn  btn-success"> 排序</button>
                </div>
                {!! Form::hidden('_method', 'PUT') !!}

                {!! Form::close()  !!}
            </div>
            <!-- /.box -->
        </div>
    </div>

<!-- Modal -->
<div class="modal fade" id="warmModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">错误提示</h4>
      </div>
      <div class="modal-body" id="errorMessage">
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
</div>



</section>
<!-- /.content -->

<script>

    //树形列表
    var tableTree=$('#tableTree');
    tableTree.on('click','.js-toggle',function(){
        var that=$(this),
            openIco=that.find('.js-open'),
            closeIco=that.find('.js-close'),
            trItem=that.closest('tr'),
            id=trItem.data('id'),
            childTr=trItem.siblings('tr').filter('[data-parent="'+id+'"]'),
            isOff=true;


        var trs=trItem.nextAll('tr'),pIds=[];

        pIds.push(id);
        for(var j=0;j<childTr.length;j++){
            pIds.push(childTr.eq(j).data('id'));
        }

        that.toggleClass('off');
        isOff=that.hasClass('off');

        openIco.toggleClass('hide',!isOff);
        closeIco.toggleClass('hide',isOff);
        childTr.toggleClass('hide',isOff);

        //父节点收起时，子节点收起
        if(isOff){
            for(var i=0;i<trs.length;i++){
                var curTr = trs.eq(i), pid=curTr.data('parent');

                if($.inArray(pid,pIds)!=-1){
                    curTr.find('.js-toggle').addClass('off');
                    curTr.find('.js-open').removeClass('hide');
                    curTr.find('.js-close').addClass('hide');

                    curTr.addClass('hide');
                }
            }
        }

    });

    $('.btn-danger').on('click', function () {
        console.log('11');
    });


    //删除订单
    function delOrder(urls, cat_id) {


        $.ajax({
            type: "DELETE",
            url: urls,
            data: '',
            dataType: "json",
            headers: {
                'X-CSRF-Token': $('meta[name="_token"]').attr('content')
            },
            async: true,
            cache: false,
            success: function (msg) {
                if (msg.status) {                  //订单删除成功

                    location.reload();
                } else {

                    $('#modal' + cat_id).modal('hide');
                    $('#errorMessage').html(msg.message);
                    $('#warmModal').modal('show');


                }//end if()
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                if (XMLHttpRequest.status == 403 && XMLHttpRequest.responseText == 'UserNotLogin') {
                    //$('body').login();
                }
            }
        }); //end ajax

    }//end func delOrder()

</script>
<script >
    var isRec=$('.js-level0,.js-level1').find('.is_recommend').has('.glyphicon-remove');
    //console.log(isRec);
    isRec.each(function(){
        var that =$(this),
        id=that.attr('id'),
        level2=$('[data-parent="'+id+'"]'),
        level3;

        level2.find('.is_recommend').addClass('disabled').find('i').css({'color':'gray','cursor':'auto'});

        for(var i=0;i<level2.length;i++){
            var curTd=level2.eq(i),curId=curTd.data('id');
            level3=$('[data-parent="'+curId+'"]');

            level3.find('.is_recommend').addClass('disabled').find('i').css({'color':'gray','cursor':'auto'});
        }

    });

    $('.is_recommend').on('click',function(){
        var el = $(this);
        var id = el.attr('id');        
        var url = "{{Route('admin.category.toggleShow')}}";

        if(el.hasClass('disabled')) return false;
        $.ajax({
            url:url+"/?id="+id,
            type:'get',
            dataType:'json',
            success:function(result){
            var childIdArr=result.childIds;
            //console.log(childIdArr.length);
                if(result.info){
                    console.log(childIdArr);
                    if(result.is_recommend==1){
                        el.find('.glyphicon').removeClass('glyphicon-remove');
                        el.find('.glyphicon').addClass('glyphicon-ok');
                        el.find('.glyphicon').css("color","green");
                        if(childIdArr.length>0){
                            for(var i=0;i<childIdArr.length;i++){
                                var cur=$('#'+childIdArr[i]);
                                //console.log("daf");
                                if(cur.length){
                                    cur.removeClass('disabled');
                                    cur.find('.glyphicon').removeClass('glyphicon-remove').addClass('glyphicon-ok').css({'color':'green','cursor':'pointer'});
                                }
                            }
                        }
                    }else{
                        el.find('.glyphicon').removeClass('glyphicon-ok');
                        el.find('.glyphicon').addClass('glyphicon-remove');
                        el.find('.glyphicon').css("color","red");
                        if(childIdArr.length>0){
                            for(var i=0;i<childIdArr.length;i++){
                                var cur=$('#'+childIdArr[i]);
                                //console.log("daf");
                                if(cur.length){
                                    cur.addClass('disabled');
                                    cur.find('.glyphicon').removeClass('glyphicon-ok').addClass('glyphicon-remove').css({'color':'gray','cursor':'auto'});
                                }
                            }
                        }

                    }

                }
            }
        });
    });

</script>
@endsection